<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import NewsVue from "../home/components/News.vue";
import TitleVue from "@/components/Title.vue";
import filmItem from "@/components/page/film.vue";
import { useRouter, useRoute } from "vue-router";
import { getClassify, getNews, getProjectsList } from "@/api";
const router = useRouter();
const route = useRoute();
const state = reactive({
  navs: [] as any,
  news: [] as any,
  list: [] as any,
  current: 0,
  page: 0,
  total: 0,
  loading: false,
  loadingFail: false,
  isClick: false
});
const jumpPage = ref(1);
onMounted(() => {
  getNews().then((res: any) => {
    state.news = res;
  });
  getClassify().then((res: any) => {
    state.navs = res;
    changeCurrent()
    getData();
  });
});
watch(() => route.query.code, (val) => {
  if (route.path === '/project/list') {
    changeCurrent()
    init();
    getData();
  }
})
const changeCurrent = () => {
  let code = route.query.code + "";
  let index = state.navs.findIndex((item: any) => item.code === code);
  if (~index) {
    state.current = index;
  }
}
const getData = (num: number = 1) => {
  let newval = state.isClick ? 0 : num;
  state.isClick = false
  let params = {
    page: state.page + newval,
    size: 9,
    classify: state.navs[state.current].code,
  };
  state.loading = true;
  if (state.loadingFail) {
    state.loadingFail = false;
  }
  getProjectsList(params)
    .then((res: any) => {
      const { current_page, last_page, list } = res;
      state.page = current_page;
      state.total = last_page;
      state.list = list;
      state.loading = false;
    })
    .catch(() => {
      state.loading = false;
      state.loadingFail = true;
    });
};
const handleNav = (num: number) => {
  state.current = num;
  router.replace("/project/list?code=" + state.navs[num].code);
  init();
  getData();
};
const init = () => {
  state.page = 0;
  state.total = 0;
};
const handleClick = (num: number) => {
  if (state.page + num >= 1 && state.page + num <= state.total) {
    getData(num);
  }
};
const hanldeInput = () => {
  if (jumpPage.value >= state.total) {
    jumpPage.value = state.total
  } else if (jumpPage.value < 1) {
    jumpPage.value = 1
  } else {
    jumpPage.value = Math.floor(jumpPage.value)
  }
}
//跳转到某一页
const hanldePage = () => {
  state.isClick = true
  state.page = jumpPage.value
  getData();
};
</script>

<template>
  <div class="project-nav-wrapper">
    <div class="project-nav">
      <div v-for="(item, index) in state.navs" :key="index" class="item" :class="[state.current === index && 'active']"
        @click="handleNav(index)">
        <div class="nav-item">{{ item.title }}</div>
        <div class="nav-shake"></div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="flex flex-wrap" v-if="state.list.length">
      <filmItem v-for="item in state.list" :item="item"></filmItem>
    </div>
    <div class="tc font-md py-4" v-else>
      <div v-if="state.loading">数据加载中...</div>
      <div v-else-if="state.loadingFail">数据加载失败...</div>
      <div v-else>暂无信息</div>
    </div>
    <div class="arrow-wrap flex-center" v-if="state.total > 1">
      <div class="arrow left" @click="handleClick(-1)" v-show="state.page > 1">
        <div class="infont-icon"></div>
      </div>
      <div class="num text-body">
        {{ state.page }}<span class="mx-1">/</span>{{ state.total }}
      </div>
      <div class="arrow right" @click="handleClick(1)" v-show="state.page < state.total">
        <div class="infont-icon"></div>
      </div>
      <div class="jump-wrap flex">
        <span class="font-m">跳转到</span>
        <input type="number" class="jump-input" v-model="jumpPage" @input="hanldeInput" />
        <div class="jump-btn" @click="hanldePage">GO</div>
      </div>
    </div>
  </div>
  <TitleVue title="新闻资讯" desc="NEWS"></TitleVue>
  <NewsVue :obj="state.news"></NewsVue>
  <div style="margin-bottom: 75px"></div>
</template>

<style lang="scss" scoped>
.project-nav-wrapper {
  margin-bottom: 44px;
}

.project-nav {
  width: 1440px;
  height: 100px;
  padding: 20px 0;
  margin: 0 auto;
  font-size: 16px;
  display: flex;
  // justify-content: space-between;
  border-bottom: 1px solid #9195a3;

  .item {
    position: relative;
    padding: 0 17px;
    display: inline-flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    line-height: 60px;

    .nav-item:hover {
      font-weight: bold;
      background: linear-gradient(90deg, #252086 0%, #e60012 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

.active {
  .nav-item {
    font-weight: bold;
    background: linear-gradient(to right, #221a8a 0%, #ff000a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .nav-shake {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 16px;
    height: 10px;
    transform: translateX(-50%);
    background: url("@/assets/icon/project-nav.png") center center no-repeat;
    animation: shake-rotate 0.5s ease-in-out;
  }
}

.arrow-wrap {
  .num {
    margin: 0 70px;
    font-size: 24px;
  }

  .arrow {
    position: relative;
    width: 50px;
    height: 50px;
    font-size: 0;
    background: #ffffff;
    border: 1px solid #9195a3;
    border-radius: 12px;
    cursor: pointer;

    .infont-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 0px;
      transform: translate(-50%, -50%);

      &::before {
        content: "";
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        height: 0;
        width: 0;
        transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
      }

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 0px;
        height: 2px;
        background: #9195a3;
        display: inline-block;
        transform: translateY(-50%);
        transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
      }
    }

    &.left {
      .infont-icon {
        &::before {
          margin-left: -4px;
          border-right: 6px solid #9195a3;
        }

        &::after {
          right: -10px;
        }
      }
    }

    &.right {
      .infont-icon {
        &::before {
          border-left: 6px solid #9195a3;
        }

        &::after {
          left: -5px;
        }
      }
    }

    &:hover {
      .infont-icon {
        &::after {
          width: 14px;
        }
      }
    }

    &.left:hover {
      .infont-icon {
        &::before {
          margin-left: -8px;
        }
      }
    }

    &.right:hover {
      .infont-icon {
        &::before {
          margin-left: 8px;
        }
      }
    }
  }

  .jump-wrap {
    margin-left: 100px;

    span {
      line-height: 45px;
    }

    .jump-input {
      display: inline-block;
      margin-left: 20px;
      padding: 0 10px;
      width: 65px;
      height: 45px;
      text-align: center;
      border: 1px solid #9195a3;
      border-radius: 12px;
    }

    .jump-btn {
      margin-left: 20px;
      width: 45px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      border: 1px solid #9195a3;
      border-radius: 12px;
      cursor: pointer;
    }
  }
}

@keyframes shake-rotate {
  10% {
    transform: translateX(-50%) rotate(-10deg);
  }

  20% {
    transform: translateX(-50%) rotate(-30deg);
  }

  30% {
    transform: translateX(-50%) rotate(-10deg);
  }

  40% {
    transform: translateX(-50%) rotate(-5deg);
  }

  50% {
    transform: translateX(-50%) rotate(5deg);
  }

  60% {
    transform: translateX(-50%) rotate(10deg);
  }

  70% {
    transform: translateX(-50%) rotate(30deg);
  }

  80% {
    transform: translateX(-50%) rotate(10deg);
  }

  90% {
    transform: translateX(-50%) rotate(5deg);
  }

  0%,
  100% {
    transform: translateX(-50%) rotate(0);
  }
}
</style>
